<div class="materials-main-container">

    <div class="left">
        <div class="tree-wrap">
            <nz-tree
                    nzExpandAll="true"
                    [nzData]="dataSource"
                    [nzSelectedKeys]="defaultKeys"
                    [nzExpandedKeys]="expandKeys"
                    [nzTreeTemplate]="treeNode"
                    [nzSearchValue]="searchValue"
                    (nzClick)="checkDetail($event)"
            >
            </nz-tree>
            <ng-template #treeNode let-node>
                <div class="custom-node" [class.active]="activedNode?.key === node.key">
                    <span class="span-node">{{node.title}}</span>
                    <div class="tree-btns">
                        <a color="primary" (click)="editNode(node.origin,$event)">修改</a>
                        <a color="primary" (click)="addNode(node.origin,$event)">新增下级</a>
                        <a nz-popconfirm nzPopconfirmTitle="确认删除该节点吗？" nzPopconfirmPlacement="left"
                           (nzOnConfirm)="deleteNode(node.origin,$event)">删除
                        </a>
                    </div>
                </div>
            </ng-template>
        </div>
    </div>

    <div class="right">
        <div class="form-wrap">
            <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
                <nz-form-item>
                    <nz-form-label>关键词</nz-form-label>

                    <nz-form-control>
                        <input formControlName="fileName" nz-input placeholder="关键词"/>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <button nz-button nzType="primary" (click)="getGridData()"><i nz-icon nzType="search"></i>搜索</button>
                        <button nz-button nzType="primary" (click)="openFileUploadModal()"><i nz-icon nzType="plus"></i>新增</button>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </div>


        <div class="table-wrap">
            <nz-table
                    #middleTable
                    nzSize="middle"
                    [nzFrontPagination]="false"
                    [nzData]="rightTableData"
                    [nzTotal]="total"
                    [(nzPageIndex)]="pageNum"
                    [(nzPageSize)]="pageSize"
                    (nzPageIndexChange)="getGridData()"
            >
                <thead>
                <tr>
                    <th>文件名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of middleTable.data">
                    <td>{{ data.fileName }}</td>
                    <td>{{ data.createDate }}</td>
                    <td>
                        <a (click)="viewFile(data, tplContent)">预览</a>
                        <nz-divider nzType="vertical"></nz-divider>
                        <a (click)="download(data)">下载</a>
                        <nz-divider nzType="vertical"></nz-divider>
                        <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                           (nzOnConfirm)="onFileDelete(data.id)">
                            删除
                        </a>
                    </td>
                </tr>
                </tbody>
            </nz-table>
        </div>
    </div>

    <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="660" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
              (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
        <form nz-form [formGroup]="folderForm">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSm]="6" [nzXs]="24">节点名称</nz-form-label>
                        <nz-form-control>
                            <input nz-input formControlName="name" placeholder="节点名称">
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>
    </nz-modal>

    <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="660" [(nzVisible)]="fileModalShow" [nzTitle]="fileModalTitle"
              (nzOnCancel)="onFileCancel()" (nzOnOk)="onFileConfirm()">

        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="24" class="pb20">
                <nz-upload
                        nzType="drag"
                        [(nzFileList)]="fileList"
                        (nzChange)="handleChange($event)"
                        [nzAction]="uploadUrl"
                >
                    <p class="ant-upload-drag-icon">
                        <i nz-icon nzType="inbox"></i>
                    </p>
                    <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                </nz-upload>
            </div>

        </div>

    </nz-modal>

    <ng-template #tplContent let-params let-ref="modalRef">

        <ng-container *ngIf="fileType === 'pdf'">
            <ngx-extended-pdf-viewer [src]="fileSrc" useBrowserLocale="true" height="700px"></ngx-extended-pdf-viewer>
        </ng-container>
        <ng-container *ngIf="fileType === 'png' || fileType === 'jpg'">
            <div style="width: 1050px;max-height: 800px;overflow: auto">
                <img [src]="fileSrc" alt=""/>
            </div>
        </ng-container>

        <ng-container *ngIf="fileTypeList.indexOf(fileType) < 0">
            <div style="margin: 20px;font-size: 20px">该文件类型无法预览，请下载后自行打开</div>
        </ng-container>

    </ng-template>
</div>
